<template>
  <div class="account-pages mt-5 mb-5">
    <div class="container" v-if="step === 0">
      <div class="row justify-content-center">
        <div class="col-lg-5">
          <div class="card">
            <!-- Logo-->
            <div class="card-header pt-4 pb-4 text-center bg-primary">
              <a href="/">
                <span>
                  <img src="/public/images/logo.png" alt height="18" />
                </span>
              </a>
            </div>

            <div class="card-body p-4">
              <div class="text-center w-75 m-auto">
                <h4 class="text-dark-50 text-center mt-0 fw-bold">免费注册</h4>
                <p class="text-muted mb-4">
                  还没有账户? 创建你的账户，只需花不到一分钟的时间
                </p>
              </div>

              <form id="frmRegister">
                <div class="row mb-2">
                  <label for="fullname">全名</label>
                  <input
                    class="form-control"
                    name="user.empname"
                    type="text"
                    placeholder="输入你的姓名"
                    required
                  />
                </div>

                <div class="row mb-2">
                  <label for="emailaddress">电子邮件地址</label>
                  <input
                    class="form-control"
                    type="email"
                    name="user.email"
                    required
                    placeholder="输入你的电子邮件地址"
                  />
                </div>

                <div class="row mb-2">
                  <label for="emailaddress">手机</label>
                  <input
                    class="form-control"
                    type="text"
                    name="user.mobileNo"
                    required
                    placeholder="输入你的手机号码"
                  />
                </div>

                <div class="row mb-2">
                  <label for="emailaddress">用户名</label>
                  <input
                    class="form-control"
                    type="text"
                    name="user.username"
                    required
                    placeholder="输入登录系统时的用户名"
                  />
                </div>

                <div class="row mb-2">
                  <label for="emailaddress">验证码</label>
                  <div class="row">
                    <div class="col-6 pe-0">
                      <input
                        type="text"
                        id="captchaValue"
                        name="captchaValue"
                        class="form-control"
                        placeholder="验证码"
                      />
                    </div>
                    <div class="col-6">
                      <img
                        id="kaptchaImage"
                        class="w-100 h-75"
                        title="点击图片更换验证码"
                      />
                      <small>
                        <a href="javascript:void(0)" @click="refreshKaptcha()"
                          >刷新</a
                        >
                      </small>
                    </div>
                  </div>
                </div>

                <div class="row mb-0 text-center">
                  <button
                    type="button"
                    class="btn btn-primary"
                    @click.stop="register()"
                  >
                    注 册
                  </button>
                </div>
              </form>
            </div>
            <!-- end card-body -->
          </div>
          <!-- end card -->

          <div class="row mt-3">
            <div class="col-12 text-center">
              <p class="text-muted">
                已经有账户了?
                <router-link to="/login" class="text-dark ms-1">
                  <b>登录</b>
                </router-link>
              </p>
            </div>
            <!-- end col-->
          </div>
          <!-- end row -->
        </div>
        <!-- end col -->
      </div>
      <!-- end row -->
    </div>
    <!-- end container -->

    <div class="me-auto alert text-center" v-if="step === 1">
      <h1>注册成功！</h1>
      <span class="text-danger">用户名和密码将发到您的注册手机上, 请查收!</span>
      <br />
      <br />
      <br />
      <h4>
        <router-link to="/login">去登录</router-link>
      </h4>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { APP_FLIGHT_PATH } from "@/common/common.js";
// import {  } from '@/api/user.js'

export default {
  data() {
    return {
      step: 0,
    };
  },
  mounted: function () {
    $("#kaptchaImage").click(() => {
      this.refreshKaptcha();
    });
    this.refreshKaptcha();
  },
  methods: {
    showErrMsg: function (msg) {
      this.$store.dispatch("showAlertMsg", { errMsg: msg });
    },
    refreshKaptcha: function () {
      $("#kaptchaImage")
        .attr("src", "/Flight/captcha.do?" + Math.floor(Math.random() * 100))
        .fadeIn();
    },
    register: function () {
      const self = this;
      $.ajax({
        type: "post",
        url: APP_FLIGHT_PATH + "/register.do",
        data: $("#frmRegister").serialize(),
        dataType: "json",
        success: function (jsonResult) {
          if (jsonResult.status === "OK") {
            self.showErrMsg("注册成功");
            self.step = 1;
          } else {
            self.showErrMsg(jsonResult.errmsg);
          }
        },
      });
    },
  },
};
</script>
